<template>
	<view class="home">
		<div class="lunbo">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%;height: 100%;">
				<swiper-item v-for="(item,index) in movieList" :key="index">
					<view class="swiper-item">
						<img :src="item.img" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</div>
		<view class="list">
			<uni-section class="mb-10" title="热映电影" type="line"></uni-section>

			<view v-for="(item,index) in movieList" :key="index" class="movie-item">
				<div class="pic">
					<img :src="item.img" mode="" />
				</div>
				<view class="content">
					<view class="name">{{item.nm}}</view>
					<view class="cat">类别</view>
					<view class="dir">{{item.dir}}</view>
					<view class="msg"></view>
					<view class="act">{{item.dexc}}</view>
					<view class="showtime">{{item.comingTitle}}</view>
					<view class="info2">
						<view class="sc">{{item.mk}} </view>
						<view class="wish">xxxx人想看</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		CONFIG

	} from '../../utils/config';

	import movieJson from '../../utils/movie'
	onLoad(() => {

		console.log(movieList.value)
	})

	let movieList = ref(movieJson)
</script>

<style lang="scss">
	.home {
		background-color: #f4f4f4;
		/* 页面背景颜色 */
		font-family: 'Arial', sans-serif;
		/* 字体 */
		color: #333;
		/* 默认文本颜色 */
		padding: 20px;
		/* 页面内边距 */
		max-width: 1200px;
		/* 限制页面最大宽度 */
		margin: 0 auto;
		/* 使页面居中 */
	}

	.lunbo {
		width: 100%;
		height: 380rpx;
		border-radius: 10px;
		/* 圆角边框 */
		overflow: hidden;
		/* 清除内部浮动 */
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		/* 添加阴影效果 */
	}

	.swiper-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保证图片不失真 */
	}

	.list {
		margin-top: 20px;
		/* 列表与轮播图之间的间距 */
	}

	.uni-section {
		margin-bottom: 10px;
		/* 标题与列表项之间的间距 */
	}

	.movie-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		border: 1px solid #ccc;
		margin-bottom: 10px;
		padding: 15px;
		border-radius: 8px;
		background-color: #ffffff;
		/* 背景颜色 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		transition: transform 0.3s ease-in-out;
		/* 鼠标悬停时的缩放效果 */
	}

	.movie-item:hover {
		transform: translateY(-5px);
		/* 鼠标悬停时上移 */
	}

	.pic {
		margin-right: 20px;
		/* 图片与文本之间的间距 */

		img {
			width: 120px;
			/* 图片宽度 */
			height: 180px;
			/* 图片高度 */
			object-fit: cover;
			/* 保证图片不失真 */
			border-radius: 5px;
			/* 圆角边框 */
		}
	}

	.content {
		flex-grow: 1;
		/* 使内容区域占据剩余空间 */
	}

	.name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		/* 名称与其他文本之间的间距 */
	}

	.cat,
	.dir,
	.msg,
	.act,
	.showtime,
	.sc,
	.wish {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
		/* 信息项之间的间距 */
	}

	.info2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		/* 信息2与其他内容的间距 */
	}

	/* 响应式设计 */
	@media screen and (max-width: 768px) {
		.movie-item {
			flex-direction: column;
			align-items: center;
		}

		.pic {
			margin-right: 0;
			margin-bottom: 15px;
		}

		.content {
			text-align: center;
		}
	}
</style>